<template>
  <div class="login-wrap">
    <img src="index_bg.png" alt="" class="pic">
    <div  class="welcomePic-warp">
      <img  src="index-title.png" class="welcomePic">
    </div>
    <img src="login-left.png" class="login-left">
    <img src="login-warp.png" class="login-warp">
    <div class="login-form">
      <el-input v-model="formState.userName" placeholder="请输入用户名" />
      <el-input v-model="formState.password" placeholder="请输入密码" style="margin-top: 20px;"/>
      <el-button type="primary" block style="margin-top: 20px;width: 100%">登录</el-button>
    </div>
  </div>

</template>

<script >
import { reactive } from 'vue'
import { useIndexStore } from '@/pinia-store'
export default {
  props: {
    fetchData: {
      type: Object,
      default: () => ({})
    }
  },
  setup(props, {attrs}){

    const indexStore = useIndexStore()

    const indexData = indexStore.data

    const formState = reactive({
      userName: '',
      password: ''
    })

    if( __isBrowser__ ){
      console.log('test  客户端 setup 执行')
    }

    return {
      indexData,
      formState
    }
  }
}

</script>


<style lang="less" scoped>
@import "./index.less";
</style>